<ui:composition template="../templates/template.xhtml" xmlns="http://www.w3.org/1999/xhtml"  xmlns:f="http://java.sun.com/jsf/core" 
xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" xmlns:ui="http://java.sun.com/jsf/facelets">

	<!-- Page title -->
	<ui:define name="title">${msg.gallery_gallery_title}</ui:define>

	<!-- Page content -->
	<ui:define name="content">
		
		<!-- Breadcrumb -->
		<h:form id="galleryBreadcrumbForm">
			<p:breadCrumb styleClass="breadcrumb">
				<p:menuitem title="${msg.gallery_gallery_breadcrumb_home}" url="#{navigationBean.accessHomePage}" />
				<p:menuitem styleClass="galleryCategoryColor" title="${msg.gallery_gallery_breadcrumb_gallery}" url="#{navigationBean.accessGalleryPage}" value="${msg.gallery_gallery_breadcrumb_gallery}"/>
			</p:breadCrumb>
		</h:form>
		
		<!-- Global fieldset -->
		<h:form>
			<p:fieldset id="galleryFieldset" styleClass="fieldset galleryFieldset galleryCategoryBorderColor">
				<f:facet name="legend">
					<p:outputPanel styleClass="galleryCategoryColor">
						${msg.gallery_gallery_last_photos}
					</p:outputPanel>
				</f:facet>
				
				<!-- Photo's data grid -->
				<p:dataGrid columns="3" currentPageReportTemplate="{currentPage} ${msg.general_of} {totalPages} (${galleryBean.photosModel.rowCount} ${msg.gallery_gallery_photos_grid_photos})" 
					emptyMessage="${msg.gallery_gallery_photos_grid_no_photo_available}" id="photosGrid" lazy="true" paginator="true" paginatorPosition="bottom"
					paginatorTemplate="{FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}" rows="9" styleClass="galleryCategoryDataGridColor photosGrid" 
					value="#{galleryBean.photosModel}" var="photo">
					
					<!-- Data grid header -->
					<f:facet name="header">
						<label>${msg.gallery_gallery_photos_grid_header_order_by}</label>
						
						<!-- Sort column -->
						<p:selectOneMenu styleClass="photosGridHeaderSelector photosGridSortColumnSelector" value="#{galleryBean.photosModel.sortableColumn}">
							<f:selectItems itemLabel="${msg[column.labelKey]}" itemValue="#{column}" value="#{galleryBean.sortableColumns}" var="column"/>
							<p:ajax event="change" update="photosGrid"/>
						</p:selectOneMenu>
						
						<!-- Sort order -->
						<p:selectOneMenu styleClass="photosGridHeaderSelector" value="#{galleryBean.photosModel.currentSortOrder}">
							<f:selectItems itemLabel="${msg[order.labelKey]}" itemValue="#{order}" value="#{galleryBean.sortOrders}" var="order"/>
							<p:ajax event="change" update="photosGrid"/>
						</p:selectOneMenu>
					</f:facet>
					
					<!-- Gallery version of the photo -->
					<p:outputPanel layout="block" styleClass="galleryContainer">
						<h:graphicImage alt="${msg[photo.titleKey]}" title="${msg[photo.titleKey]}" value="/images/#{photo.galleryPath}" />
						<p:outputPanel layout="block" styleClass="galleryOverlay">
							<p:outputPanel layout="block" styleClass="galleryOverlayDescription">
								${msg.gallery_gallery_photos_grid_description_shot_on}
								<h:outputText value="#{photo.shootingJdkDate}">
									<f:convertDateTime dateStyle="medium" locale="#{userBean.currentLocale.language}"/>
								</h:outputText>
								<br/>
								${msg.gallery_gallery_photos_grid_description_added_on}
								<h:outputText value="#{photo.additionJdkDate}">
									<f:convertDateTime dateStyle="medium" locale="#{userBean.currentLocale.language}"/>
								</h:outputText>
							</p:outputPanel>
							<p:outputPanel layout="block" styleClass="galleryOverlayLink">
								<p:commandLink action="#{technicalDataSheetBean.loadPhoto}">
									<h:graphicImage value="/includes/icons/pages/gallery/linkToTDS.png"/>
									<f:setPropertyActionListener target="#{technicalDataSheetBean.currentPhotoId}" value="#{photo.entityId}" />
								</p:commandLink>
							</p:outputPanel>
						</p:outputPanel>
						
					</p:outputPanel>
				</p:dataGrid>
			</p:fieldset>
		</h:form>
	</ui:define>

</ui:composition>